<template>
	<app-layout>
		<view class="basicf">
			<view class="ftitle">
				创建优惠券
			</view>
			<view class="fbottom">
				<view class="fname">优惠券类型</view>
				<!-- <input type="text" class="input" placeholder="请输入优惠券名称" :value="name" @blur="blur"
					 /> -->
				<picker class="input" :range="dtype" :range-key="['name']" @change="changeType">
					<view class="">
						{{dtypeid == -1 ? '请选择优惠券类型' : dtype[dtypeid].name}}
					</view>
				</picker>
			</view>
			<view class="fbottom">
				<view class="fname">优惠券类型</view>
				<radio-group name="type" style="transform:scale(0.6);font-size: 42rpx;">
					<label>
						<radio color="#ff2200" :value="fumin" /><text>满减</text>
					</label>
					<label style="margin-left: 24rpx;">
						<radio color="#ff2200" :value="discount" /><text>折扣</text>
					</label>
				</radio-group>
			</view>

			<view class="fbottom">
				<view class="fname">最低消费金额(元)</view>
				<input type="number" class="input" placeholder="请输入最低消费金额" :value="amoneynum" @input="blura" />
			</view>
			<view class="fbottom">
				<view class="fname">优惠金额</view>
				<input type="number" class="input" placeholder="请输入优惠金额" :value="peonum" @input="blurp" />
			</view>

			<view class="fbottom">
				<view class="fname">优惠券有效期</view>
				<radio-group name="time" class="ftime" style="transform:scale(0.6);font-size: 42rpx;">
					<label>
						<radio color="#ff2200" :value="time1" /><text>有效天数</text>
					</label>
					<label style="margin-left: 24rpx;">
						<radio color="#ff2200" :value="time2" /><text>时间段</text>
					</label>
				</radio-group>
			</view>

			<view class="fbottom">
				<view class="fname">有效天数</view>
				<input type="number" class="input" placeholder="请输入有效天数" :value="amoneynum" @input="blura" />
			</view>
			<view class="fbottom">
				<view class="fname">有效期范围</view>
				<view class="">
					<view class="dir-left-nowrap">
						<picker mode="date" @change="changeStartime">
							<view>{{startime == '' ? '请选择起始时间' : startime}}</view>
						</picker>
						<!-- <view class="" style="width: 24rpx;"></view>
						<picker mode="time" @change="changeStartimes">
							<view>{{startimes == '' ? '时分秒' : startimes}}</view>
						</picker> -->
					</view>
					<view class="dir-left-nowrap">
						<picker mode="date" @change="changeEndtime">
							<view>{{endtime == '' ? '请选择结束时间' : endtime}}</view>
						</picker>
						<!-- <view class="" style="width: 24rpx;"></view>
						<picker mode="time" @change="changeEndtimes">
							<view>{{endtimes == '' ? '时分秒' : endtimes}}</view>
						</picker> -->
					</view>
				</view>
			</view>


			<view class="fbottom">
				<view class="fname">库存</view>
				<input type="number" class="input" placeholder="请输入库存" :value="amoneynum" @input="blura" />
			</view>
			<view class="fbottom">
				<view class="fname">单张优惠券金额</view>
				<input type="number" class="input" placeholder="请输入单张优惠券金额" :value="amoneynum" @input="blura" />
			</view>
			<view class="fbottom">
				<view class="fname">可领取人数</view>
				<input type="number" class="input" placeholder="请输入可领取人数" :value="peonum" @input="blurp" />
			</view>
		</view>
		<view class="befbutton">
			<button class="fbutton babut" @click="formSubmit">提交后再分享</button>
		</view>
		<u-popup :mask="false" :maskCloseAble="false" :length="600" mode="center" v-model="isShowShare" :zoom="false"
			@close="isShowShare = false">
			<view class="more-box">
				<view class="title">
					创建优惠券成功，是否分享
				</view>
				<view class="dir-left-nowrap main-around cross-center">
					<view class="btnfor bwbut" @click="cancelshare">
						取消分享
					</view>
					<view class="btnfor">
						<button class="btnfor bgbut" open-type="share">确定分享</button>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- <view class="befbutton" v-if="isfillin">
			<button class="fbutton bgbut" open-type="share">分享</button>
		</view> -->
	</app-layout>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import uPopup from '../../../components/basic-component/u-popup/u-popup.vue';
	export default {
		components: {
			uPopup
		},
		data() {
			return {
				dtype: [],
				dtypeid: -1,
				amoneynum: '',
				peonum: '',
				condataid: '',
				isShowShare: false,

				startime: '',
				startimes: '',
				endtime: '',
				endtimes: ''
				// isfillin: false
			};
		},
		onShareAppMessage() {
			// this.formSubmit()
			return this.$shareAppMessage({
				path: '/pages/consumer/getcoupon/getcoupon',
				// imageUrl: this.imglist == '' ? '' : this.imglist,
				params: {
					couponid: this.condataid,
					userid: this.userInfo.options.user_id
				}
			});
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info
			}),
			/* isfillin() {
				if (this.dtypeid != -1 &&
					this.amoneynum != '' &&
					this.peonum != '') {
					return true
				} else {
					return false
				}
			} */
		},
		onLoad(options) {
			this.isfillin = false
			// 优惠券类型
			this.$request({
				url: this.$apiSol.voucher.cate
			}).then((res) => {
				this.dtype = res.data.list
			}).catch(() => {

			})
		},
		methods: {
			cancelshare() {
				this.isShowShare = false
				uni.navigateBack()
			},
			changeType(e) {
				this.dtypeid = e.detail.value
			},
			changeStartime(e) {
				console.log(e);
				this.startime = e.detail.value
			},
			changeStartimes(e) {
				console.log(e);
				this.startimes = e.detail.value
			},
			changeEndtime(e) {
				console.log(e);
				this.endtime = e.detail.value
			},
			changeEndtimes(e) {
				console.log(e);
				this.endtimes = e.detail.value
			},
			blura(e) {
				this.amoneynum = e.detail.value
			},
			blurp(e) {
				this.peonum = e.detail.value
			},
			formSubmit: function(e) {
				const self = this;
				// console.log(self.dtype[self.dtypeid]);
				// console.log(self.amoneynum);
				// console.log(self.peonum);
				if (self.dtypeid == -1) {
					uni.showToast({
						title: '请选择优惠券类型',
						icon: 'none'
					})
					return
				}
				if (self.amoneynum == '') {
					uni.showToast({
						title: '请输入单张优惠券金额',
						icon: 'none'
					})
					return
				}
				if (self.peonum == '') {
					uni.showToast({
						title: '请输入可领取人数',
						icon: 'none'
					})
					return
				}
				let params = {
					type: 1,
					expire_type: 1,
					expire_day: 3,
					appoint_type: 3
				}
				params.cat_id = self.dtype[self.dtypeid].id
				params.name = self.dtype[self.dtypeid].name
				params.sub_price = self.amoneynum
				params.total_count = self.peonum
				params.user_id = self.userInfo.options.user_id
				self.$request({
					url: self.$apiSol.voucher.found,
					method: 'post',
					data: params
				}).then((res) => {
					if (res.code == 0) {
						self.isShowShare = true
						self.condataid = res.data.id
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				}).catch(() => {

				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.more-box {
		background-color: #FFFFFF;
		padding: 36rpx;
		border: 1rpx solid #353235;
		border-radius: 8rpx;

		.title {
			text-align: center;
			font-size: 36rpx;
			font-weight: 600;
			margin-bottom: 36rpx;
		}

		.btnfor {
			width: 160rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			font-size: 28rpx;
			padding: 0;
			border-radius: 8rpx;
		}
	}

	.basicf {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 42rpx 0;
		width: 686rpx;
		background-color: #FFFFFF;
		margin: 32rpx auto;
		border-radius: 32rpx;
	}

	.ftitle {
		width: 100%;
		text-align: center;
	}

	.fbottom {
		width: 604rpx;
		margin: 0 auto;
		padding: 24rpx 0 0;
		line-height: 72rpx;
		border-bottom: 2rpx solid #F2F2F2;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #333333;
	}

	.fbottom .fname {
		width: 230rpx;
	}

	.ftime {
		transform: scale(0.6);
		font-size: 21px;
		display: flex;
		flex-direction: column-reverse;
	}

	.peditext {
		color: #999999;
	}

	.fbottom .input {
		width: 374rpx;
	}

	.fbottom .input .logoStore {
		width: 170rpx;
		height: 170rpx;
		position: relative;
	}

	.fbottom .input .logoStore .remove {
		width: 40#{rpx};
		height: 40#{rpx};
		position: absolute;
		right: -16rpx;
		top: -10rpx;
		// background: $uni-important-color-red;
		background: #333333;
		color: #fff;
		border-radius: 50%;
		padding-bottom: 8#{rpx};
		font-size: 24#{rpx};
	}

	.fbottom .input .logoStore .image {
		width: 100%;
		height: 100%;
	}

	.fbottom .input .logoStore.bg {
		background: #F4F4F4;
		position: relative;
	}

	.fbottom .input .logoStore .logoStore-hor {
		position: absolute;
		width: 80rpx;
		height: 2rpx;
		left: 48rpx;
		top: 87rpx;
		background: #FFFFFF;
	}

	.fbottom .input .logoStore .logoStore-ver {
		position: absolute;
		width: 80rpx;
		height: 2rpx;
		left: 48rpx;
		top: 87rpx;
		background: #FFFFFF;
		transform: rotate(90deg);
	}

	.fbottom .input.time {
		display: flex;
		align-items: center;
	}

	.fbottom .input .center {
		padding: 0 20rpx;
	}

	.befbutton {
		background: #342B2A;
		border-radius: 12rpx;
		width: 686rpx;
		height: 88rpx;
		margin: 48rpx auto;
		overflow: hidden;
	}

	.fbutton {
		border-radius: 12rpx;
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-weight: bold;
		font-size: 36rpx;
	}

	.bsbut {
		color: #FFFFFF;
		background: #CD9C62;
	}

	.bgbut {
		background: #342B2A;
		color: #FFFFFF;
	}

	.bwbut {
		background: #CDCDCD;
		color: #342B2A;
	}

	.babut {
		background: #d07743;
		color: #FFFFFF;
	}

	.bcbut {
		border: 1rpx solid #342B2A;
		color: #342B2A;
	}
</style>
